<template>
  <div class="container">
    <div class="header">
      <div class="header-left">
        <div class="logo">
          <img :src="src" alt="">
        </div>
        <div class="title" v-if="config.HospitalConfig">{{config.HospitalConfig.HospitalName}}</div>
      </div>
      <div class="header-right">
        <div class="time">{{time}}</div>
        <div class="week">{{week}}</div>
      </div>
    </div>
    <div class="content">
      <el-row class="info">
        <el-col :span="8" class="tip">
          {{store.state.tip}}
        </el-col>
        <el-col :span="8" class="progress">
          <div class="progress" v-if="store.state.time > 0">
            <el-progress type="circle" :width="80" :percentage="store.state.time / store.state.maxTime * 100" status="warning"></el-progress>
          </div>
        </el-col>
        <el-col :span="8">
          <div v-if="store.state.personalInfo" class="patient-info">
            <div class="welcome">欢迎您, <span style="font-weight:bold;">{{store.state.personalInfo.name}}</span></div>
            <div class="quit" @click="home()">退出</div>
          </div>
        </el-col>
      </el-row>
      <router-view/>
    </div>
    <div class="footer">
      <div class="footer-left">
        <div>
          <span>终端编号:</span>
          <span v-if="client.Entity">{{client.Entity.Code}}</span>
        </div>
        <div>
          <span>系统版本:</span>
          <span>V1.0.1</span>
        </div>
      </div>
      <div class="footer-center">
        <img :src="itSrc" alt="">
      </div>
      <div class="footer-right">
        <div>
          <i style="font-size:3rem; margin-right: 1rem;" class="iconfont icon-lianxi"></i>
        </div>
        <div class="contact">
          <div class="contact-tip">有问题,请致电</div>
          <div class="phone" v-if="config.HospitalConfig">{{config.HospitalConfig.Phone}}</div>
        </div>
      </div>
    </div>
    <div class="btns">
      <div class="btn" @click="back()">
        <i class="el-icon-back"></i>
      </div>
      <div class="btn" @click="home()">
        <i class="el-icon-s-home"></i>
      </div>
      <div class="btn">
        <i class="el-icon-menu"></i>
      </div>
    </div>
    <div class="toast" v-show="this.$store.state.showLoading">
      <div class="toast-content">
        <div class="icon">
          <i class="el-icon-loading"></i>
        </div>
          {{store.state.loadingTitle}}
        </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { GetClientInfo, GetConfig } from '@/apis/api'
import dayjs from 'dayjs'
import { ICommon } from '@/units/common'
import { mixins } from 'vue-class-component'
import BaseMixin from '@/mixins/base'
declare let Common: ICommon

@Component
export default class Portrait extends mixins(BaseMixin) {
  private src = ''
  private itSrc = ''
  private time = ''
  private week = ''
  // 启动事件
  private async created () {
    this.logger.info('竖屏')
    this.showLoading('系统启动中')
    this.logger.info('系统启动中')
    this.updateDate()
    this.logger.info('开始加载医院配置')
    const configResult = await GetConfig()
    if (configResult.status === 200) {
      this.config = configResult.data
      this.store.commit('updateConfig', configResult.data)
      this.src = Common.getLocalConfig().server + configResult.data.HospitalConfig.HospitalLogo
      this.itSrc = Common.getLocalConfig().server + configResult.data.HospitalConfig.It
      this.logger.info('医院配置加载成功')
    } else {
      this.logger.error(`暂停服务, 医院配置加载失败${configResult.data}`)
      this.showLoading('暂停服务')
      return
    }
    this.logger.info('加载客户端配置')
    const clientResult = await GetClientInfo()
    if (clientResult.data?.Code === 200) {
      this.store.commit('updateClient', clientResult.data.Data)
      this.client = clientResult.data.Data
      this.logger.info('客户端配置加载成功')
    } else {
      this.logger.error(`暂停服务, 医院配置加载失败${clientResult.data}`)
      this.showLoading('暂停服务')
      return
    }
    // 配置文件更新到浏览器
    this.logger.info('更新客户端配置信息')
    this.showLoading('更新客户端配置信息')
    let result = this.common.setDeviceConfig(JSON.stringify(this.client))
    if (result.code === 200) {
      this.showLoading('更新客户端配置信息完成')
      this.logger.info('更新客户端配置信息完成')
    } else {
      this.logger.error(result.message)
      this.showLoading('更新客户端配置信息失败')
      setTimeout(() => {
        this.showLoading('暂停服务')
      }, 3000)
      return
    }
    // 释放DLL文件
    this.logger.info('更新驱动文件')
    this.showLoading('更新驱动文件')
    result = this.common.unZipDeviceDll()
    if (result.code === 200) {
      this.showLoading('更新驱动文件完成')
      this.logger.info('更新驱动文件完成' + result.message)
    } else {
      this.logger.error('更新驱动文件失败' + result.message)
      this.showLoading('更新驱动文件失败')
      setTimeout(() => {
        this.showLoading('暂停服务')
      }, 3000)
      return
    }
    this.hideLoading()
    setTimeout(() => {
      this.updateConfig()
    }, 60000)
  }

  private async updateConfig () {
    this.logger.track('加载客户端配置')
    const clientResult = await GetClientInfo()
    if (clientResult.data?.Code === 200) {
      this.store.commit('updateClient', clientResult.data.Data)
      this.client = clientResult.data.Data
      this.logger.track('客户端配置加载成功')
      this.logger.track('更新客户端配置信息')
      let result = this.common.setDeviceConfig(JSON.stringify(this.client))
      if (result.code === 200) {
        this.logger.track('更新客户端配置信息完成')
      } else {
        this.logger.error(result.message)
        this.showLoading('暂停服务')
        return
      }
      // 释放DLL文件
      this.logger.track('更新驱动文件')
      result = this.common.unZipDeviceDll()
      if (result.code === 200) {
        this.logger.track('更新驱动文件完成' + result.message)
      } else {
        this.logger.error('更新驱动文件完成失败' + result.message)
        this.showLoading('暂停服务')
        return
      }
    }
    setTimeout(() => {
      this.updateConfig()
    }, 60000)
  }

  // 更新时间
  private updateDate () {
    this.time = dayjs().format('YYYY-MM-DD HH:mm:ss')
    switch (dayjs().day()) {
      case 0:
        this.week = '星期日'
        break
      case 1:
        this.week = '星期一'
        break
      case 2:
        this.week = '星期二'
        break
      case 3:
        this.week = '星期三'
        break
      case 4:
        this.week = '星期四'
        break
      case 5:
        this.week = '星期五'
        break
      case 6:
        this.week = '星期六'
        break
    }
    setTimeout(() => {
      this.updateDate()
    }, 500)
  }
}
</script>

<style scoped>
.container{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .header-left, .header-right, .footer{
  display: flex;
}
.header{
  justify-content: space-between;
  padding: 0 4rem;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.05);
  height: 10rem;
  line-height: 10rem;
  z-index: 1;
}
.title{
  font-size: 2.4rem;
  color: #01D8A0;
}
.logo img{
  width: 3rem;
  height: 3rem;
  vertical-align: middle;
  margin-right: 1rem;
}
.header-right{
  font-size: 2rem;
  color: #444444;
}
.week{
  margin-left: 1rem;
}
.content{
  background-color: #F8F8F8;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}
.footer{
  padding: 0 4rem;
  height: 8rem;
  justify-content: space-between;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.05);
  text-align: left;
  align-items: center;
}
.footer-left, .contact-tip{
  font-size: 1.2rem;
  color: #bbbbbb;
}
.phone{
  font-size: 1.8rem;
  color: #01D8A0;
}
.footer-right{
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-center img{
  height: 6rem;
  margin-left: 5.2rem;
}
.btns{
  position: fixed;
  bottom: 10rem;
  left: 0;
  right: 0;
  width: 20rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 2rem;
  align-items: center;
  padding: 1rem 2rem;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
}

.btn{
  font-size: 4rem;
}

.toast{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toast-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50rem;
  height: 30rem;
  background: #F8F8F8;
  border-radius: 10px;
  font-size: 3rem;
}

.info{
  display: flex;
  height: 10rem;
  margin: 0 8rem;
  justify-content: space-between;
  align-items: center;
}

.tip{
  text-align: left;
  font-size: 3rem;
  color:#2c3e50;
}
.patient-info{
  display: flex;
  font-size: 2rem;
  justify-content: flex-end;
  align-items: center;
}
.quit{
  border-radius: 2rem;
  background-color: #F67665 ;
  color: white;
  padding: 1rem;
  margin-left: 1rem;
}
</style>
